<template>
  <div class="content">
    <a-row>
      <a-col :span="8">
        <div class="box">
          <div class="point" @click="returnPage()">
            <img src="../assets/weigen.png" />
            <h2>未跟进</h2>
          </div>
          <div v-if="message1.length > 0">
            <a-row class="head">
              <a-col :span="8">
                来电人
              </a-col>
              <a-col :span="8">
                问题描述
              </a-col>
              <a-col :span="8">
                问题类型
              </a-col>
            </a-row>
            <a-row class="body-f" v-for="(item,index) in message1">
              <a-col :span="8">
                {{ item.Name }}
              </a-col>
              <a-col :span="8">
                {{ item.Content }}
              </a-col>
              <a-col :span="8">
                {{ item.QuestionName }}
              </a-col>
            </a-row>
          </div>
          <div v-else>
            <a-empty />
          </div>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="box">
          <div class="point" @click="returnPage()">
            <img src="../assets/genjin.png" />
            <h2>已跟进</h2>
          </div>
          <div v-if="message2.length > 0">
            <a-row class="head">
              <a-col :span="8">
                来电人
              </a-col>
              <a-col :span="8">
                问题描述
              </a-col>
              <a-col :span="8">
                问题类型
              </a-col>
            </a-row>
            <a-row class="body-f" v-for="(item,index) in message2" >
              <a-col :span="8">
                {{ item.Name }}
              </a-col>
              <a-col :span="8">
                {{ item.Content }}
              </a-col>
              <a-col :span="8">
                {{ item.QuestionName }}
              </a-col>
            </a-row>
          </div>
          <div v-else>
            <a-empty />
          </div>
        </div>
      </a-col>
      <a-col :span="8" class="marggin">
        <div class="box" style="margin-right: 0;">
          <div class="point" @click="returnPage()">
            <img src="../assets/bohui.png" />
            <h2>被驳回</h2>
          </div>
          <div v-if="message3.length > 0">
            <a-row class="head">
              <a-col :span="8">
                来电人
              </a-col>
              <a-col :span="8">
                问题描述
              </a-col>
              <a-col :span="8">
                问题类型
              </a-col>
            </a-row>
            <a-row class="body-f" v-for="(item,index) in message3" >
              <a-col :span="8">
                {{ item.Name }}
              </a-col>
              <a-col :span="8">
                {{ item.Content }}
              </a-col>
              <a-col :span="8">
                {{ item.QuestionName }}
              </a-col>
            </a-row>
          </div>
          <div v-else>
            <a-empty />
          </div>
        </div>
      </a-col>
    </a-row>

  </div>
</template>

<script>
	import {
		doGetMain
	} from '@/api/follow'
	export default {
		data() {
			return {
				message1: [],
				message2: [],
				message3: []
			}
		},
		created() {
			this.getDataInfo()
		},
		methods: {
			async getDataInfo() {
				let res = await doGetMain({
					top: 20
				})
				this.message1 = res.data.message1
				this.message2 = res.data.message2
				this.message3 = res.data.message3
			},
			returnPage() {
				this.$router.push({
					name: 'followUp'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		background: rgba(255, 255, 255, .7);
		border-radius: 5px;
		padding: 30px 15px;
		text-align: center;
		margin-right:15px;
		min-height: 87.5vh;
		overflow: hidden;
		.point{
			cursor: pointer;
			h2 {
				margin: 15px 0;
				font-size: 18px;
				font-weight: bold;
				color: #333;
			}
			img {
				width: 100px;
			}
		}
		.head{
			line-height: 40px;
			background-color: #f4f4f5;
			border: 1px solid #EBEEF5;
		}
		.body-f{
			padding: 8px 0;
			border: 1px solid #EBEEF5;
			border-top: 0;
		}

	}
</style>
